#{extends 'include/base.html' /}
#{set title:'发布文章' /}
<div class="work_nav">
    <ul>
        <li ><a href="@{Members.work(0)}">我的作品</a></li>
        <li><a href="@{Members.draft(0)}">我的草稿</a></li>
        <li><a href="@{Members.album(0)}">我的专辑</a></li>
        <li class="work_nav_active"><a href="@{Members.addAlbum()}">发布作品</a></li>
    </ul>
</div>
<div class="simple_wrap editor_work_wrap" style="height: auto !important;">
    <ul class="path_nav">
        <li class="path_index"><a href="@{Application.index(0)}">首页</a></li>
        <li>><a href="@{Members.home()}">个人中心</a></li>
        <li>><a href="@{Members.work()}">我的项目</a></li>
        <li>>发布作品</li>
    </ul>

    <ul class="work_main_nav">
        <li><a href="@{Concerns.myTrend(0)}">动态</a></li>
        <li><a href="@{Members.work(0)}">我的作品</a></li>
        <li><a href="@{Concerns.myConcern(0)}">关注</a></li>
        <li><a href="@{Collections.collectWork(0)}">收藏</a></li>
    </ul>
    <p>发布作品</p>
    <form  method = "post" action="@{Api.uploadArticlePhoto()}" enctype="multipart/form-data" name="form" id="form">
    <p><span>*</span>请上传封面: <input type="file" class="editor_work_wrap_input" name="image" id="multi-file" /> <span class="editor_file_chip">支持png尺寸310*240</span></p>
        <img src="${url?url:""}" alt="" class="post_img" id="touxiang" >
        <input type="hidden" name="articleId" id="articleId" />
        <input type="hidden" name="photoId" id="photoId" value="${article?article.photoId:""}"/>
    <p><span>*</span>请选择分类: <select class="editor_work_wrap_input" name="article.type" id="type">
        <option value="2">品牌视觉</option>
        <option value="3">品牌文案</option>
        <option value="4">产品概念</option>
        <option value="0">草稿</option>
    </select></p>
    <p><span>*</span>请填写标题: <input type="text" class="editor_work_wrap_input" name="article.title" id="title" value="${article?article.title:""}"/></p>
    <p><span>*</span>请填写关键字: <input type="text" class="editor_work_wrap_input" name="article.tag" id="tag" value="${article?article.tag:""}"/><span class="key_word">支持10位，空格分隔</span></p>
    <p><span>*</span>请填写正文:
    </p>
    <div class="content_wrap">
        <script id="articleContent" name="article.content" type="text/plain">${article?article.content.raw():""}</script>

    </div>
    <p class="editor_check_box"><span>*</span>允许评论:
    <span class="radio_wrap">
    <input type="radio" name="is_permit_comment" value="0" checked>是
    <input type="radio" name="is_permit_comment" value="1">否
    </span></p>
    <p><span>*</span>版权:
        <span class="radio_wrap">
        <input type="checkbox" name="copyRight" value="原创" checked>原创<br>
        <input type="checkbox" name="copyRight" value="创造共同许可">创造共同许可 <br/>
        <input type="checkbox" name="copyRight" value="编辑原创内容">编辑原创内容 <br/>
        <input type="checkbox" name="copyRight" value="企业/个人投稿内容">企业/个人投稿内容 <br/>
        <input type="checkbox" name="copyRight" value="未经许可不得用于任何地方">未经许可不得用于任何地方 <br/>
        <input type="checkbox" name="copyRight" value="转载">转载
            </span>
    </p>
    *{<p class="editor_tuijian"><span>*</span>推荐主题站: <select class="editor_work_wrap_input" name="description" id="description">
        <option>请选择主题站</option></select></p>
    <p><span>*</span>附件: <input type="file" class="editor_work_wrap_input" name="file"/> <span class="additional_file_chip">注:可以上传JPG,PNG,BMP及rar压缩包</span></p>
      }*  <p class="register_err hidden" style="text-align:center;position: relative;top: 0px;">错误</p>
    <div class="oh">
        <div class="button_wrap" style="top: 0px;">
            <button class="editor_commit" id="btn" type="button">发布</button>
            <button type="reset" class="my_info_btn_wrap_abort">取消</button>
        </div>
    </div>
    </form>


</div>
<script type="text/javascript" src="@{'/public/ueditor/ueditor.config.js'}"></script>
<script type="text/javascript" src="@{'/public/ueditor/ueditor.all.js'}"></script>
<script type="text/javascript">
    (function () {
        var multi_file = document.getElementById('multi-file'),                 // 获取上传控件
                slice = Array.prototype.slice;                                      // 获取数组slice原型方法
        multi_file.addEventListener('change', function (e) {                    // 监听上传控件数据变化
            var files = slice.call(multi_file.files, 0);                        // 将FileList对象转为数组获取forEach方法
            if(files[0].size>50000){
                alert("文件太大了,最大50KB");
                files[0]=null;
                $("#multi-file").val("");
            }
            else if (files[0].type.toLowerCase().match(/image.*/)) {
                reader = new FileReader();                                  // 实例化FileReader对象，用于读取文件数据
                reader.addEventListener('load', function (e) {              // 监听FileReader实例的load事件
                    $("#touxiang").attr('src', e.target.result)
                });
                reader.readAsDataURL(files[0]);
            }
            else{
                alert("只能选择图片");
                files[0]=null;
                $("#multi-file").val("");
            }
        });
    })();

    var editor = new UE.ui.Editor({initialFrameHeight:400
        ,toolbars:[[
            'fullscreen', 'source', '|', 'undo', 'redo', '|',
            'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain',  '|',
            'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
            'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
            'indent', '|',
            'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',
            'link', 'unlink', 'anchor',  '|',
            'simpleupload', 'emotion',  'insertvideo', 'music','map', 'insertcode', 'pagebreak', 'template', 'background', '|',
            'horizontal', 'date', 'time', 'spechars'

        ]]});
    editor.render("articleContent");

    $('#btn').click(function () {

        var type = $('#type').val();
        var title = $('#title').val();
        var tag = $('#tag').val();
        var description = $('#description').val();
        var content = editor.getContent();
        var copyRight="";
        $("input[name='copyRight']:checked").each(function() {
                copyRight+=$(this).val()+" ";
        });
         var is_permit_comment = $("input[name='is_permit_comment']:checked").val();
        var  data ={
            article:{
            }
        };
        var file = $('#multi-file').val();
        var img = $("#touxiang").attr("src");
        data.article.type=type;
        data.article.title=title;
        data.article.content=content;
        data.article.copyRight=copyRight;
        data.article.is_permit_comment=is_permit_comment;
        data.article.tag=tag;
        data.article.description=description;
        if(file==""||file==null){
            if(img==""){
                $('.register_err').text("封面不能为空");
                $('.register_err').removeClass('hidden');
            }
            else{
                $.post('@{Api.addArticle()}', data, function(res) {
                    if(res.result==1) {
                        $('#articleId').val(res.data);
                        $("#form").submit();
                    }
                    else {
                        $('.register_err').text(res.data);
                        $('.register_err').removeClass('hidden');
                    }
                });
            }
        }
        else{
            $.post('@{Api.addArticle()}', data, function(res) {
                if(res.result==1) {
                    if(file!=null&&file!=""){
                        $('#articleId').val(res.data);
                        $("#form").submit();
                    }
                    else{
                        location.href="@{Application.index()}"
                    }
                }
                else {
                    $('.register_err').text(res.data);
                    $('.register_err').removeClass('hidden');
                }
            });
        }

    });
</script> 